import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Form,
  Icon,
  Statistic, BackTop, Alert, Button,
} from 'antd';
import { arrTrans, renderValueStatus } from '@/utils/utils';
import ReactEcharts from 'echarts-for-react';
import themeObj from './chalk.json';
import debounce from 'lodash/debounce';
import forEach from 'lodash/forEach'
import map from 'lodash/map'
import get from 'lodash/get'
import merge from 'lodash/merge'
import echarts from 'echarts';
import 'react-clock/dist/Clock.css';
import styles from './../Home/index.less';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import GridLayout from 'react-grid-layout';
import 'react-calendar/dist/Calendar.css';
import Calendar from 'react-calendar';
import CountUp from 'react-countup';
import gold from './../../images/gold.png';
import gold_pre from './../../images/renqun.png';
import gold_pre2 from './../../images/gold_pre.png';
import logo from './../../images/logo.png';
import gold_groud from './../../images/gold_groud.png';
import titleLeft from './../../images/title-left.png';
import titleRight from './../../images/title-right.png';
import AreaMap from "@/components/AreaMap";

echarts.registerTheme('my_theme', themeObj);

const FormItem = Form.Item;

function getFromLS(key) {
  let ls = {};
  try {
    ls = JSON.parse(localStorage.getItem('rgl-9')) || {};
  } catch (e) {
    /*Ignore*/
  }
  return ls[key];
}

function saveToLS(key, value) {
  localStorage.setItem(
    'rgl-9',
    JSON.stringify({
      [key]: value,
    }),
  );
};

@connect(({ RevenueHomeData, loading }) => ({
  RevenueHomeData,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    // this.echarts = window.echarts;
    this.myChart = [];
    this.state = {
      date: new Date(),
      clock_date: new Date(),
      showMore: true,
      autoplay: true,
      offsetWidth: 0,
      carouselH: 0,
      boxH2: 0,
      boxH: 0,
      editRecord: {},

      layout: getFromLS('layout') ||[{"w":4,"h":3,"x":0,"y":0,"i":"a","moved":false,"static":true},{"w":3,"h":1,"x":4,"y":1,"i":"c","moved":false,"static":false},{"w":3,"h":1,"x":4,"y":0,"i":"b","moved":false,"static":false},{"w":3,"h":1,"x":4,"y":2,"i":"d","moved":false,"static":false},{"w":12,"h":4,"x":0,"y":3,"i":"e","moved":false,"static":false},{"w":6,"h":3,"x":6,"y":7,"i":"f","moved":false,"static":false},{"w":6,"h":3,"x":6,"y":10,"i":"h","moved":false,"static":false},{"w":6,"h":3,"x":0,"y":7,"i":"i","moved":false,"static":false},{"w":5,"h":3,"x":7,"y":0,"i":"k","moved":false,"static":false},{"w":6,"h":3,"x":0,"y":10,"i":"j","moved":false,"static":false}],
      IsFull: this.IsFull(),

    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const {
      RevenueHomeData: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    console.log('scrollData', scrollData);
    const table = document.querySelector('.homePage');
    if (pageLoaded) {
      setTimeout(function() {
        console.log('table', table);
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);
      // this.dynamic();
      // this.dynamic2()

    } else {
      const {} = this.props;
      // dispatch({
      //   type: `RevenueHomeData/changeLoaded`,
      // });
      dispatch({
        type: 'RevenueHomeData/fetch',
        payload: {},
        callback: () => {
          // this.dynamic()
          // this.dynamic2()
          const { dispatch } = this.props;
          dispatch({
            type: `RevenueHomeData/changeLoaded`,
          });
        },
      });
    }

    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));


    this.changeCustomH();

  }

  changeCustomH = () => {
    this.setState({
      homeWidth: document.querySelector('.homePage').offsetWidth - 30,
    });
  };
  resize = () => {
    this.changeCustomH();
    this.changeTableY();
    this.resizeChart();
  };
  changeTableY = () => {
    this.setState({
      tableY: 500,
    });
  };
  resizeChart = () => {
    this.setState({
      IsFull: this.IsFull(),
    });
  };
  scroll = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'RevenueHomeData/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  componentWillUnmount() {
    const table = document.querySelector('.homePage');
    console.log('table', table);
    table.removeEventListener('scroll', debounce(this.scroll, 300));
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
  }

  componentWillReceiveProps = (nextProps) => {

  };
  getOption = () => {
    const {
      RevenueHomeData: { data },
    } = this.props;

    let xData=[];
    let wechatData=[];
    let counterData=[];
    let totalData=[];
    for(let i=0;i<data.date_range_charge_analysis.length;i++){
      xData.push(data.date_range_charge_analysis[i].date)
      counterData.push(data.date_range_charge_analysis[i].counter_payment.amount)
      wechatData.push(data.date_range_charge_analysis[i].wechat_payment.amount)
      totalData.push((Number(data.date_range_charge_analysis[i].wechat_payment.amount)+Number(data.date_range_charge_analysis[i].counter_payment.amount)).toFixed(2))
    }

    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      "tooltip": {
        "trigger": "axis",
        "axisPointer": {
          "type": "shadow",
          textStyle: {
            color: "#fff"
          }

        },
      },
      toolbox: {
        show: true,
        emphasis: {
          iconStyle: {
            color: "rgb(255,255,255)"
          }
        },
        feature: {
          dataView: {readOnly: true},
        }
      },
      "grid": {
        top: '5%',
        left: '4%',
        right: '3%',
        bottom: '10%',
        textStyle: {
          color: "#fff"
        }
      },
      "legend": {
        right: '4%',
        top: '0',
        textStyle: {
          color: '#edf8ff',
        },
        "data": ['微信公众号缴费', '柜台缴费', '平均']
      },
      xAxis: {
        type: 'category',
        data: xData,

      },
      "yAxis": [{
        "type": "value",
        "axisLine": {
          lineStyle: {
            color: '#90979c'
          }
        },
        "axisTick": {
          "show": false
        },
        "axisLabel": {
          "interval": 0,

        },
        "splitArea": {
          "show": false
        },

      }],
      "series": [{
        "name": "微信公众号缴费",
        "type": "bar",
        "stack": "总量",
        "barMaxWidth": 35,
        "barGap": "10%",
        "itemStyle": {
          "normal": {
            "color": "#04BE02",
            "label": {
              "show": false,
              "textStyle": {
                "color": "#fff"
              },
              "position": "inside",
              formatter: function(p) {
                return p.value > 0 ? (p.value) : '';
              }
            }
          }
        },
        "data":wechatData
      },

        {
          "name": "柜台缴费",
          "type": "bar",
          "stack": "总量",
          "itemStyle": {
            "normal": {
              "color": "rgb(251,85,117)",
              "barBorderRadius": 0,
              "label": {
                "show": false,
                "position": "inside",
                formatter: function(p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data":counterData
        }, {
          "name": "总数",
          "type": "line",
          symbolSize:10,
          symbol:'circle',
          "itemStyle": {
            "normal": {
              "color": "#f0db17",
              "barBorderRadius": 0,
              "label": {
                "show": true,
                "position": "top",
                formatter: function(p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data":totalData
        },
      ]
    }
    return option;


  };
  getOption2 = () => {
    const {
      RevenueHomeData: { data },
    } = this.props;
    let xdata = [];
    let ydata = [];
    if (data.date_range_charge_analysis.length === 0) {
      return {};
    }
    for (let i = 0; i < data.date_range_charge_analysis.length; i++) {
      xdata.push(data.date_range_charge_analysis[i].date);
      ydata.push(parseInt(data.date_range_charge_analysis[i].counter_payment.count)+parseInt(data.date_range_charge_analysis[i].wechat_payment.count));
    }
    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      tooltip: {
        trigger: 'axis',
      },
      toolbox: {
        show: true,
        feature: {
          dataView: {readOnly: true},
        },
        emphasis: {
          iconStyle: {
            color: "rgb(255,255,255)"
          }
        },
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        right: '7%',
        top: '0',
        textStyle: {
          fontSize: 12,
          color: '#F1F1F3',
        },
      },
      grid: {
        top: '4%',
        left: '3%',
        right: '4%',
        bottom: '4%',
        containLabel: true,
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: xdata,
      }],
      yAxis: [{
        type: 'value',
        minInterval: 1,
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: '{value}',
        },
      },],
      series: [{
        name: '缴费笔数',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00ffc6',
            }, {
              offset: 0.8,
              color: 'rgb(0,140,255)',
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          color: 'rgb(0,140,255)',
        },
        markPoint: {
          symbol: 'rect',
          symbolOffset: [0, '50%'],
          symbolSize: [1, 1],
          data: [{
            type: 'max',
            name: '最大值',
          },
          ],
        },
        data: ydata,

      }],
    };
    return option;


  };
  getOption3 = () => {
    const {
      RevenueHomeData: { data },
    } = this.props;
    let xdata = [];
    let ydata = [];
    if (data.date_range_open_account_analysis.length === 0) {
      return {};
    }
    for (let i = 0; i < data.date_range_open_account_analysis.length; i++) {
      xdata.push(data.date_range_open_account_analysis[i].date);
      ydata.push(parseInt(data.date_range_open_account_analysis[i].count));
    }
    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        right: '7%',
        top: '0',
        textStyle: {
          fontSize: 12,
          color: '#F1F1F3',
        },
      },
      toolbox: {
        show: true,
        feature: {
          dataView: {readOnly: true},
        },
        emphasis: {
          iconStyle: {
            color: "rgb(255,255,255)"
          }
        },
      },
      smooth: true,
      grid: {
        top: '4%',
        left: '3%',
        right: '4%',
        bottom: '4%',
        containLabel: true,
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: xdata,
      }],
      yAxis: [{
        type: 'value',
        minInterval: 1,
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: '{value}',
        },
      }],
      series: [{
        name: '开户数',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            width: 4,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: '#57BD9F', // 0% 处的颜色
              }, {
                offset: 1,
                color: '#19BC8C', // 100% 处的颜色
              }],
            },
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 6,
            shadowOffsetY: 10,
          },
        },
        itemStyle: {
          normal: {
            color: '#57BD9F',
            borderWidth: 8,
            borderColor: '#57BD9F',
          },
        },

        markPoint: {
          symbol: 'rect',
          symbolOffset: [0, '50%'],
          symbolSize: [1, 1],
          data: [{
            type: 'max',
            name: '最大值',
          },
          ],
        },
        data: ydata,

      }],
    };
    return option;


  };
  dynamic = () => {
    const {
      RevenueHomeData: { data },

    } = this.props;
    if (data.date_range_status_analysis.length === 0) {
      return {};
    }
    let date = {
      normal_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length - 1].normal_upload_count),
      error_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length - 1].error_upload_count),
      missing_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length - 1].missing_upload_count),
      waiting_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length - 1].waiting_upload_count),
      reading_faill_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length - 1].reading_faill_count),
      total_count: data.date_range_status_analysis[data.date_range_status_analysis.length - 1].total_count,
    };
    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      toolbox: {
        show: true,
        emphasis: {
          iconStyle: {
            color: "rgb(255,255,255)"
          }
        },
        feature: {
          dataView: {readOnly: true},
        }

      },
      legend: {
        orient: 'vertical',
        show: true,
        right: '30%',
        y: 'center',
        itemWidth: 3,
        itemHeight: 30,
        itemGap: 10,
        textStyle: {
          color: '#d9e0f6',
          fontSize: 16,
          lineHeight: 20,
          rich: {
            percent: {
              color: '#00ffc6',
              fontSize: 18,
            },
          },
        },
        formatter: name => {
          switch (name) {
            case '正常':
              return (
                `正常 ${date.normal_upload_count} \n{percent|${((date.normal_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '错报':
              return (
                `错报 ${date.error_upload_count} \n{percent|${((date.error_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '漏报':
              return (
                `漏报 ${date.missing_upload_count} \n{percent|${((date.missing_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '未上报':
              return (
                `未上报 ${date.waiting_upload_count} \n{percent|${((date.waiting_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '抄表失败':
              return (
                `抄表失败 ${date.reading_faill_count} \n{percent|${((date.reading_faill_count / date.total_count) * 100).toFixed(2)}%}`
              );
            default:
              break;
          }
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['65%', '75%'],
          center: ['30%', '50%'],
          hoverAnimation: false,
          z: 10,
          label: {
            position: 'center',
            formatter: () => {
              return `收费总金额\r\n${date ? date.total_count : 0} `;
            },
            rich: {
              total: {
                fontSize: 30,
                color: '#fff',
              },
            },
            color: '#b6cfe7',
            fontSize: 16,
            lineHeight: 30,
          },
          data: [
            {
              value: date.normal_upload_count,
              name: '正常',
              itemStyle: {
                color: '#0286ff',
              },
            },
            {
              value: date.error_upload_count,
              name: '错报',
              itemStyle: {
                color: '#fb5274',
              },
            },
            {
              value: date.missing_upload_count,
              name: '漏报',
              itemStyle: {
                color: '#ffd302',
              },
            },
            {
              value: date.waiting_upload_count,
              name: '未上报',
              itemStyle: {
                color: '#adadad',
              },
            },
            {
              value: date.reading_faill_count,
              name: '抄表失败',
              itemStyle: {
                color: '#da0422',
              },
            },
          ],
          labelLine: {
            show: false,
          },
        },
        {
          type: 'pie',
          radius: ['54%', '64%'],
          center: ['30%', '50%'],
          hoverAnimation: false,
          label: {
            show: false,
          },
          data: [
            {
              value: date.normal_upload_count,
              name: '正常',
              itemStyle: {
                color: '#0286ff',
                opacity: 0.5,
              },
            },
            {
              value: date.error_upload_count,
              name: '错报',
              itemStyle: {
                color: '#fb5274',
                opacity: 0.5,
              },
            },
            {
              value: date.missing_upload_count,
              name: '漏报',
              itemStyle: {
                color: '#ffd302',
                opacity: 0.5,
              },
            },
            {
              value: date.waiting_upload_count,
              name: '未上报',
              itemStyle: {
                color: '#adadad',
                opacity: 0.5,
              },
            },
            {
              value: date.reading_faill_count,
              name: '抄表失败',
              itemStyle: {
                color: '#da0422',
                opacity: 0.5,
              },
            },
          ],
          labelLine: {
            show: false,
          },
        },
        {
          type: 'pie',
          radius: ['43%', '53%'],
          center: ['30%', '50%'],
          hoverAnimation: false,
          label: {
            show: false,
          },
          data: [
            {
              value: date.normal_upload_count,
              name: '正常',
              itemStyle: {
                color: '#0286ff',
                opacity: 0.3,
              },
            },
            {
              value: date.error_upload_count,
              name: '错报',
              itemStyle: {
                color: '#fb5274',
                opacity: 0.3,
              },
            },
            {
              value: date.missing_upload_count,
              name: '漏报',
              itemStyle: {
                color: '#ffd302',
                opacity: 0.3,
              },
            },
            {
              value: date.waiting_upload_count,
              name: '未上报',
              itemStyle: {
                color: '#adadad',
                opacity: 0.3,
              },
            },
            {
              value: date.reading_faill_count,
              name: '抄表失败',
              itemStyle: {
                color: '#da0422',
                opacity: 0.3,
              },
            },
          ],
          labelLine: {
            show: false,
          },
        },
      ],

    };
    return option;
  };
  getOption4=()=>{
    // 使用了工具库lodash，cdn：https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.js
    const {
      RevenueHomeData: { data},

    } = this.props;
    const user_analysis=data.user_analysis;
    let parseData={
      female: {
        name: '收款金额(¥)',
        data: [],
      },
      male: {
        name: '收款笔数',
        data: [],
      }
    };
    for(let i=0;i<user_analysis.length;i++){
      parseData.female.data.push({
        value: Number(user_analysis[i].charge_amount),
        label: user_analysis[i].username
      })
      parseData.male.data.push({
        value: Number(user_analysis[i].charge_count),
        label: user_analysis[i].username
      })
    }
    let yAxisData = new Set();
    let legendData = [];
    forEach(parseData, (d) => {
      legendData.push(d.name);
      forEach(d.data, (item) => {
        yAxisData.add(item.label);
      });
    });

    let top = 10;
    let bottom = 30;

    yAxisData = [...yAxisData];

    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        left: 'center',
        bottom: 5,
        itemWidth: 15,
        itemHeight: 11,
        itemGap: 20,
        borderRadius: 4,
        textStyle: {
          fontSize: 14
        },
        data: legendData
      },
      grid: [{
        right: '6%',
        width: '35%',
        containLabel: true,
        bottom
      },{
        left: '52%',
        width: '0%',
        bottom: bottom + 16
      }, {
        left: '8%',
        width: '35%',
        containLabel: true,
        bottom
      } ].map(item => merge({
        top
      }, item)),
      xAxis: [{
        type: 'value',

        axisLabel: {
          show: true
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      }, {
        gridIndex: 1,
        show: true
      }, {
        gridIndex: 2,
        type: 'value',
        inverse: true,
        axisLabel: {
          show: true
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      }].map((item) => merge(item, {
        axisLabel: {
          color: '#e1ecff',
          margin: 0
        },
        splitLine: {
          lineStyle: {
            color: '#E0E0E0',
            type: 'dashed'
          }
        },
      })),
      yAxis: [{
        position: 'left',
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
        {
          gridIndex: 1,
          position: 'center',
          axisLabel: {
            align: 'center',
            padding: [8, 0, 0, 0],
            fontSize: 12,
            color: `#f2ebff`
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        {
          gridIndex: 2,
          position: 'right',
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      ].map((item) => {
        return merge(item, {
          type: 'category',
          inverse: false,
          axisLine: {
            lineStyle: {
              color: '#E0E0E0'
            }
          },
          axisTick: {
            show: false
          },
          data: yAxisData
        });
      }),
      series: [{
        name: get(parseData, 'male.name'),
        label: {
          position: 'right'
        },
        itemStyle: {
          color: '#01C5B2',
          barBorderRadius: [0, 4, 4, 0]
        },
        data: map(get(parseData, 'male.data'), d => d.value)
      },
        {
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: get(parseData, 'female.name'),
          label: {

            position: 'left'
          },
          itemStyle: {
            color: '#ff5190',
            barBorderRadius: [4, 0, 0, 4]
          },
          data: map(get(parseData, 'female.data'), d => d.value)
        }
      ].map(item => merge(item, {
        type: 'bar',
        barWidth: 11,
        label: {
          show: true,
          fontFamily: 'Rubik-Medium',
          fontSize: 14,
          distance: 10
        }
      }))
    };
    return option
  }
  dynamic2 = (type) => {
    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    const {
      RevenueHomeData: { data },

    } = this.props;
    if (data.user_analysis.length === 0) {
      return {};
    }
    let vendor_names = [];
    let total_counts = [];
    for (let i = 0; i < data.user_analysis.length; i++) {
      vendor_names.push(data.user_analysis[i].username);
      if(type){
        total_counts.push({
          name: data.user_analysis[i].username,
          value: data.user_analysis[i].open_account_count,
        });
      }else{
        total_counts.push({
          name: data.user_analysis[i].username,
          value: data.user_analysis[i].charge_amount,
        });
      }

    }
    const objData = array2obj(data, 'name');

    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: '2%',
        data: vendor_names,
      },
      series: [
        {
          name: type?'开户数':'收费金额',
          type: 'pie',
          radius: '80%',
          center: ['55%', '50%'],
          data: total_counts,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    return option;
  };
  onChange = date => {
    console.log('date', date);
    this.setState({ date });
    const { dispatch } = this.props;
    dispatch({
      type: 'RevenueHomeData/changeDate',
      payload: moment(date).format('YYYY-MM-DD'),
      callback: () => {
        dispatch({
          type: 'RevenueHomeData/fetch',
        });
      },
    });
  };

  onLayoutChange = (layout) => {
    console.log('onLayoutChange',layout);
    saveToLS('layout', layout);
    this.setState({ layout }, function() {
      this.changeCustomH();
    });
  };

  // 判断是否全屏
  IsFull = () => {
    const fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
    const fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
    if (fullscreenElement == null) {
      return false;
    }
    return true;

  };

  render() {
    const {
      RevenueHomeData: { data, scrollData, pageLoaded, searchParams },

    } = this.props;
    let percent = 0;
    // if (data.summary.cold_meter && data.summary.cold_meter.yesterday_consumption !== 0) {
    //   percent = (data.summary.cold_meter.today_consumption - data.summary.cold_meter.yesterday_consumption) / data.summary.cold_meter.yesterday_consumption * 100;
    // }
    console.log('data',data)
    const form=this.props.form
    const getFieldDecorator=form.getFieldDecorator
    return (
      <div className={`homePage ${styles.home}`}
           style={{ height: 'calc(100vh - 98px)', overflow: 'auto', padding: '15px' }}>
        <div className={styles.homePageTop}>
          <i className="fl"><img src={titleLeft} /></i>
          <span className="biaoti fl">营收数据大屏</span>
          <i className="fr"><img src={titleRight} /></i>
        </div>
        <Form  layout="inline"  className="search-form">
          <AreaMap labelColor={'#fff'} form={form} searchParams={searchParams} getFieldDecorator={getFieldDecorator}/>
          <FormItem><Button
            type="primary"
            icon='search'
            onClick={() => {
              const { form } = this.props;
              form.validateFields((err, fieldsValue) => {
                if (err) return;
                this.props.dispatch({
                  type: 'RevenueHomeData/fetch',
                  payload:{
                    ...fieldsValue,

                  }
                });

              });
            }}
          >
            查询
          </Button>
          </FormItem>
        </Form>
        <GridLayout draggableHandle={'.draggableHandle'} className="grid-layout" layout={this.state.layout}
                    onLayoutChange={this.onLayoutChange}
                    cols={12} rowHeight={100} width={this.state.homeWidth}>
          <div key="a" style={{ textAlign: 'center' }}>
            <Calendar
              style={{ height: '100%' }}
              onChange={this.onChange}
              value={new Date(searchParams.date)}
              maxDetail={'month'}
              minDetail={'month'}
              maxDate={new Date()}
            />
          </div>
          <div key="b" className={'draggableHandle'}>
            <div className={`${styles.topItem} `}>
              <div className={styles.image}><img
                src={gold} alt=""/></div>
              <div>
                <div className={styles.count}>
                  {
                    (data.date_range_charge_analysis.length>0) ? <CountUp
                      end={Number(data.date_range_charge_analysis[data.date_range_charge_analysis.length-1].counter_payment.amount)+Number(data.date_range_charge_analysis[data.date_range_charge_analysis.length-1].wechat_payment.amount) || 0}/>:''
                  }
                </div>
                <div className={styles.explain}>当日缴费金额&nbsp;(￥)</div>
              </div>
            </div>
          </div>
          <div key="c" className={'draggableHandle'}>
            <div style={{display:'flex',height:'100%'}}>
              <div className={`${styles.topItem} `} style={{flex:1}}>
                <div className={styles.image}><img
                  src={gold_groud} alt=""/></div>
                <div>
                  <div className={styles.count}>
                    {
                      (data.date_range_charge_analysis.length>0) ? <CountUp
                        end={data.date_range_charge_analysis[data.date_range_charge_analysis.length-1].counter_payment.count+data.date_range_charge_analysis[data.date_range_charge_analysis.length-1].wechat_payment.count || 0}/>:''
                    }
                  </div>
                  <div className={styles.explain} style={{fontSize:'14px'}}>当日缴费笔数</div>
                </div>
              </div>
              <div className={`${styles.topItem} `} style={{flex:1}}>
                <div className={styles.image}><img
                  src={gold_pre} alt=""/></div>
                <div>
                  <div className={styles.count}>
                    {
                      (data.date_range_charge_analysis.length>0) ? <CountUp
                        end={data.date_range_open_account_analysis[data.date_range_open_account_analysis.length-1].count|| 0}/>:''
                    }
                  </div>
                  <div className={styles.explain} style={{fontSize:'14px'}}>当日新开户数</div>
                </div>
              </div>
            </div>

          </div>
          <div key="d" className={'draggableHandle'}>
            <div style={{display:'flex',height:'100%'}}>
              <div className={`${styles.topItem} `} style={{flex:1}}>
                <div className={styles.image}><img
                  src={gold_pre2} alt=""/></div>
                <div>
                  <div className={styles.count}>
                    {
                      (data.date_range_billing_analysis) ? <CountUp
                        end={data.date_range_billing_analysis.amount || 0}/>:''
                    }
                  </div>
                  <div className={styles.explain} style={{fontSize:'14px'}}>当日扣费金额</div>
                </div>
              </div>
              <div className={`${styles.topItem} `} style={{flex:1}}>
                <div className={styles.image}><img
                  src={logo} alt=""/></div>
                <div>
                  <div className={styles.count}>
                    {
                      (data.date_range_billing_analysis) ? <CountUp
                        end={data.date_range_billing_analysis.consumption || 0}/>:''
                    }
                  </div>
                  <div className={styles.explain} style={{fontSize:'14px'}}>当日扣费水量</div>
                </div>
              </div>
            </div>
          </div>
          <div key="e">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                近30天缴费金额
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.getOption()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
          <div key="f">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                当日营业员收费比例
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.dynamic2()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>

          <div key="h">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                当日营业员开户数统计
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.dynamic2(true)}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
          <div key="i">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                近30天缴费笔数
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.getOption2()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
          <div key="k">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                当日营业员收款金额与笔数关系
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.getOption4()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
          <div key="j">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                近30天开户统计
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.getOption3()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>

        </GridLayout>
        <div className={styles.homeFullIcon}
             onClick={() => {
               const element = document.querySelector('.homePage');
               if (this.state.IsFull) {
                 if (document.exitFullscreen) {
                   document.exitFullscreen();
                 } else if (document.mozCancelFullScreen) {
                   document.mozCancelFullScreen();
                 } else if (document.webkitExitFullscreen) {
                   document.webkitExitFullscreen();
                 }
               } else if (element.requestFullscreen) {
                 element.requestFullscreen();
               } else if (element.msRequestFullscreen) {
                 element.msRequestFullscreen();
               } else if (element.mozRequestFullScreen) {
                 element.mozRequestFullScreen();
               } else if (element.webkitRequestFullscreen) {
                 element.webkitRequestFullscreen();
               }
             }}
        >
          <Icon className={styles.homeFullIconContent} type={this.state.IsFull ? 'fullscreen-exit' : 'fullscreen'}/>
        </div>
        <BackTop target={() => {
          return document.querySelector('.homePage');
        }}/>
      </div>
    );
  }
}

export default BasicList;
